<template>
  <dogeo-map @mounted="handleMountMap" :options="options" ref="dogeoMap" class="view-tools">
    <template v-slot:menu-start>
      <el-popover
        placement="right-start"
        title=""
        width="200"
        trigger="hover"
        content="工具箱"
        popper-class="popover-plain">
        <span @click="handleShowTools" slot="reference" class="menu-icon"><i class="el-icon-s-grid"></i></span>
      </el-popover>
      <el-popover
        placement="right-start"
        title=""
        width="200"
        trigger="hover"
        content="清除"
        popper-class="popover-plain">
        <span @click="handleClear" slot="reference" class="menu-icon"><i class="el-icon-delete"></i></span>
      </el-popover>
    </template>
    <el-drawer
      title="工具箱"
      :visible.sync="isShowTools"
      :direction="direction"
      :append-to-body="true"
      size="320px"
      custom-class="drawer-active">
      <div class="box-info">
        <div class="list-tools">
          <div v-for="item in tools" :key="item.text" @click="handleOpenTool(item)" class="list-item">
            <span class="item-icon"><i :class="item.icon"></i></span>
            <span class="item-text">{{ item.text }}</span>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :title="toolItem.text"
      :visible.sync="isShowToolItem"
      direction="rtl"
      :append-to-body="true"
      :modal="false"
      size="320px"
      ref="toolContent"
      @opened="handleOpenedTool"
      custom-class="drawer-active">
      <div class="box-info">
        <component :is="toolItem.component" :viewer="viewer"></component>
      </div>
      <span @mousedown="handowDownCollapse" class="tool-collpase-bar" title="拖拽改变面板宽度">
        <i class="el-icon-more"></i>
      </span>
    </el-drawer>
  </dogeo-map>
</template>

<script>
import DogeoMap from '@/components/dogeo/map.vue'

export default {
  name: 'dmapt-tools',

  components: {
    DogeoMap
  },

  data() {
    let mode = ((window.application || {}).dmapt || {}).mode || {}
    const CESIUM_BASE_URL = ((mode || {}).cesium || {}).CESIUM_BASE_URL
    return {
      viewer: null,
      options: {
        CESIUM_BASE_URL: CESIUM_BASE_URL,
        isStoreLayers: true
      },
      direction: 'ltr',
      // 显示工具箱
      isShowTools: false,
      tools: [
        {
          icon: 'el-icon-place',
          text: '坐标定位',
          name: 'locate',
          component: () => import(/* webpackChunkName: "tools-locate" */ '@/views/tools/locate/locate.vue')
        },
        {
          icon: 'el-icon-aim',
          text: '地图标记', name: 'sign',
          component: () => import(/* webpackChunkName: "tools-sign" */ '@/views/tools/sign/sign.vue')
        },
        {
          icon: 'el-icon-connection',
          text: '坐标转换',
          name: 'transform',
          component: () => import(/* webpackChunkName: "tools-transform" */ '@/views/tools/transform/transform.vue')
        },
        {
          icon: 'el-icon-s-platform',
          text: '控制台',
          name: 'console',
          component: () => import(/* webpackChunkName: "tools-console" */ '@/views/tools/tool/console.vue')
        },
        {
          icon: 'el-icon-s-open',
          text: '画图形',
          name: 'draw',
          component: () => import(/* webpackChunkName: "tools-draw" */ '@/views/tools/draw/draw.vue')
        },
        {
          icon: 'el-icon-c-scale-to-original',
          text: '模型载入',
          name: 'model-load-local',
          component: () => import(/* webpackChunkName: "tools-load-local" */ '@/views/tools/model/load-local.vue')
        },
        {
          icon: 'el-icon-copy-document',
          text: '图层载入',
          name: 'layer-load',
          component: () => import(/* webpackChunkName: "tools-load-layer" */ '@/views/tools/layer/load-layer.vue')
        },
        {
          icon: 'el-icon-s-promotion',
          text: '飞行',
          name: 'flight',
          component: () => import(/* webpackChunkName: "tools-flight" */ '@/views/tools/flight/flight.vue')
        },
        {
          icon: 'el-icon-search',
          text: '距离量算',
          name: 'distance',
          component: () => import(/* webpackChunkName: "tools-distance" */ '@/views/tools/measure/distance.vue')
        },
        {
          icon: 'el-icon-search',
          text: '面积量算',
          name: 'area',
          component: () => import(/* webpackChunkName: "tools-area" */ '@/views/tools/measure/area.vue')
        },
        {
          icon: 'el-icon-receiving',
          text: '工具',
          name: 'tool'
        }
      ],
      isShowToolItem: false,
      toolItem: {}
    }
  },

	methods: {
    // 地图加载完成
    handleMountMap ({ viewer } = {}) {
      this.viewer = viewer
    },
    // 打开工具箱
    handleShowTools () {
      this.isShowTools = true
    },
    // 打开工具
    handleOpenTool (item) {
      this.isShowTools = false
      this.toolItem = item
      if (item.component) {
        this.isShowToolItem = true
      }
    },
    // 打开工具后
    handleOpenedTool () {
      setTimeout(() => {
        this.$refs.toolContent.$el.setAttribute('for', 'tool-content')
      }, 1000)
    },
    // 清除
    handleClear () {
      if (!this.viewer) {
        return true
      }
      this.viewer.entities.removeAll()
      // this.viewer.scene.primitives.removeAll()
    },
    // 属性侧边栏伸缩
    handowDownCollapse (e) {
      mousedown(e, this.$refs.toolContent.$el)
    }
	}
}

// 按下
function mousedown (e, el) {
  let elStyle = getComputedStyle(el)
  let bodyStyle = getComputedStyle(document.body)
  document.collaseActive = {
    e, el,
    elStyle: { width: parseFloat(elStyle.width) },
    bodyStyle: { width: parseFloat(bodyStyle.width) }
  }
  document.addEventListener('mousemove', mousemove, false)
  document.addEventListener('mouseup', mouseup, false)
}

// 移动
function mousemove (e) {
  let act = document.collaseActive
  if (act && act.e && act.el) {
    let lastX = act.e.clientX
    let currentX = e.clientX
    let width = act.elStyle.width
    width = width - (currentX - lastX)
    let min = 128
    let max = act.bodyStyle.width - 8
    if (width < min) {
      width = min
    }
    // 大于左侧加min * 2
    else if (width > max) {
      width = max
    }
    act.el.style.width = width + 'px'
    let drawer = act.el.querySelector('.el-drawer')
    if (drawer) {
      drawer.style.width = width + 'px'
    }
  }
}

// 按起
function mouseup () {
  document.collaseActive = null
  document.removeEventListener('mousemove', mousemove)
  document.removeEventListener('mouseup', mouseup)
}
</script>

<style lang="less">
.view-tools {
  position: fixed !important;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.list-tools {
  overflow: hidden;
  border: 1px solid #eaeefb;
  border-radius: 4px;
  .list-item {
    float: left;
    width: 25%;
    text-align: center;
    color: #666;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;
    cursor: pointer;
    &:hover {
      .item-icon,.item-text {
        color: #409EFF;
      }
    }
  }
  .item-icon {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 26px;
    color: #606266;
    transition: color .15s linear;
  }
  .item-text {
    display: block;
    padding-bottom: 8px;
    font-size: 12px;
  }
}
.box-info {
  padding: 4px 4px 56px;
  .el-form-item {
    margin-bottom: 8px;
  }
  .checkbox-min {
    .el-checkbox {
      margin-right: 8px;
      width: 42px;
      line-height: 18px;
    }
  }
  .el-checkbox__label {
    padding-left: 6px;
  }
  .el-select {
    display: block;
  }
  .btns-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    text-align: center;
    border-top: 1px solid #EBEEF5;
    z-index: 11;
    background: rgba(255, 255, 255, 0.8);
  }
}
.tool-collpase-bar {
  position: absolute;
  left: -7px;
  top: 50%;
  .el-icon-more {
    font-size: 24px;
    transform: rotate(90deg);
    color: #409EFF;
    cursor: ew-resize;
  }
}
</style>